<template>
  <div class="batch">
    <el-tabs v-model="activeName">
      <el-tab-pane label="批量替换" name="first">
        <avue-form :option="option"
                   v-model="form"
                   ref="form"
                   @submit="handleSubmit">
        </avue-form>
      </el-tab-pane>
      <el-tab-pane label="批量修改" name="second">
        <avue-form :option="option2"
                   v-model="form2"
                   ref="form2"
                   @submit="handleSubmit2">
        </avue-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {
  batchEdit,
  batchReplace
} from '../../../../../../api/electronicsFile/electronicsFile'
import { mapFields } from 'vuex-map-fields'

export default {
  name: 'editReplace',
  props: {
    tableSelected: {
      type: Array
    },
    idTable: {
      type: String
    }
  },
  data () {
    return {
      activeName: 'first',
      tabs: false,
      form: {},
      form2: {},
      page: {
        pageNo: 1,
        pageSize: 1000
      },
      tabIndex: '0'
    }
  },
  computed: {
    ...mapFields('electronicsFile/getHead', {
      headTable: 'retrieved'
    }),
    ids () {
      const ids = { ids: [] }
      if (this.tableSelected) {
        this.tableSelected.map(item => {
          ids.ids.push(item.id)
        })
      }
      return ids
    },
    option () {
      return {
        labelWidth: 120,
        column: [
          {
            label: '操作字段',
            prop: 'mdCode',
            span: 24,
            row: true,
            type: 'select',
            props: {
              label: 'mdName',
              value: 'mdCode'
            },
            dicData: this.headTable || [],
            rules: [
              {
                required: true,
                message: '请选择',
                trigger: 'blur'
              }
            ]
          }, {
            label: '替换内容',
            prop: 'findVal',
            span: 24,
            row: true,
            rules: [
              {
                required: true,
                message: '请输入',
                trigger: 'blur'
              }
            ]
          }, {
            label: '替换后的内容',
            prop: 'newVal',
            span: 24,
            row: true,
            rules: [
              {
                required: true,
                message: '请输入',
                trigger: 'blur'
              }
            ]
          }
        ]
      }
    },
    option2 () {
      return {
        labelWidth: 120,
        column: [
          {
            label: '操作字段',
            prop: 'mdCode',
            span: 24,
            row: true,
            type: 'select',
            props: {
              label: 'mdName',
              value: 'mdCode'
            },
            dicData: this.headTable || [],
            rules: [
              {
                required: true,
                message: '请选择',
                trigger: 'blur'
              }
            ]
          }, {
            label: '替换内容',
            prop: 'newVal',
            span: 24,
            row: true,
            rules: [
              {
                required: true,
                message: '请输入',
                trigger: 'blur'
              }
            ]
          }
        ]
      }
    }
  },
  methods: {
    handleSubmit (form, done) {
      const requestData = { ...this.form, ...this.ids }
      batchReplace(this.idTable, requestData).then(() => {
        this.$message.success('操作成功！')
        this.$emit('handleSuccess')
        done()
      }).catch(() => {
        done()
      })
    },
    handleSubmit2 (form, done) {
      const requestData = { ...this.form2, ...this.ids }
      batchEdit(this.idTable, requestData).then(() => {
        this.$message.success('操作成功！')
        this.$emit('handleSuccess')
        done()
      }).catch(() => {
        done()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .batch{
    padding: 0 15px;
  }
</style>
